HTML5 Canvas 学习之一

最新推荐文章于 2025-11-05 20:48:02 发布

转载最新推荐文章于 2025-11-05 20:48:02 发布 · 217 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/-gap/archive/2012/06/05/2536478.html

文章标签：

#xhtml

本文介绍了一个简单的HTML5游戏开发实例，展示了如何使用JavaScript创建游戏对象并实现基本的交互功能，如移动蘑菇图像。

创建父类

//公用 定义一个游戏物体戏对象       
function GameObject()       
{       
    this.x = 0;//x 坐标      
    this.y = 0;//y 坐标      
    this.image = null; //图片      
}

创建一个子类

//定义公用蘑菇Mushroom 继承游戏对象GameObject       
function Mushroom() {};       
Mushroom.prototype = new GameObject();//游戏对象GameObject  
//蘑菇实例       
var mushroom = new Mushroom();
mushroom.image = mushroomImg;      //设置蘑菇的图片 new Image()对象    
mushroom.x = parseInt(screenWidth/2);          
mushroom.y = screenHeight - 40;        //蘑菇图片高度为40,为了能完整显示蘑菇

画图方法

var  ctx = document.getElementById('mycanvas').getContext('2d'); //获取2d画布的方法     
screenWidth = parseInt($("#mycanvas").attr("width"));   
//屏幕宽度
screenHeight = parseInt($("#mycanvas").attr("height"));   
//屏幕高度

setInterval(gameLoop, 10);   //一直画画画画画

//循环描绘物体       
function gameLoop()       
{       
    //清除屏幕       
    ctx.clearRect(0, 0, screenWidth, screenHeight);       
    ctx.save();       
    //绘制背景       
    ctx.drawImage(backgroundForestImg, 0, 0);       
    //绘制蘑菇       
    ctx.drawImage(mushroom.image, mushroom.x, mushroom.y);       
    ctx.restore();       
    }

通过var ctx = DOM对象.getContext('2d');获取2D画布

ctx.clearRect(x,y,宽度,高度);清除一个矩形内的东西

ctx.save();保存

ctx.drawImage(new Image()对象, x, y); 画图

ctx.restore(); 执行?

$(对象).mousemove(function(e){

　　e.pageX获取鼠标在这个对象里面的X坐标

　　e.pageY获取鼠标在这个对象里面的Y坐标

})

对象

function obj(){

this.属性1;

this.属性2;

this.属性3;

}

继承

function Son(){}

son.prototype = new obj();

var son = new Son();

son.属性1;

son.属性2;

son.属性3;

效果：

效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo</title>
<script src="js/jquery-1.7.1.min.js"></script>
<script>




//全局变量          
var backgroundForestImg = new Image();//森林背景图          
var mushroomImg = new Image();//蘑菇图          
var ctx;//2d画布          
var screenWidth;//画布宽度          
var screenHeight;//画布高度  
mushroomImg.src = "images/mushroom.png";//蘑菇          
backgroundForestImg.src = "images/forest1.jpg";//森林背景图    
   
screenWidth = parseInt($("#mycanvas").attr("width"));          
screenHeight = parseInt($("#mycanvas").attr("height"));   

//公用 定义一个游戏物体戏对象       
function GameObject()       
{       
    this.x = 0;//x 坐标      
    this.y = 0;//y 坐标      
    this.image = null; //图片      
} 
//定义公用蘑菇Mushroom 继承游戏对象GameObject       
function Mushroom() {};       
Mushroom.prototype = new GameObject();//游戏对象GameObject  
//蘑菇实例       
var mushroom = new Mushroom();
mushroom.image = mushroomImg;          
mushroom.x = parseInt(screenWidth/2);          
mushroom.y = screenHeight - 40;
//循环描绘物体       
function gameLoop()       
{       
    //清除屏幕       
    ctx.clearRect(0, 0, screenWidth, screenHeight);       
    ctx.save();       
    //绘制背景       
    ctx.drawImage(backgroundForestImg, 0, 0);       
    //绘制蘑菇       
    ctx.drawImage(mushroom.image, mushroom.x, mushroom.y);       
    ctx.restore();       
    }     
    //事件处理   
function addEventHandlers()   
{   
    //鼠标移动则蘑菇跟着移动   
    $("#container").mousemove(function(e){   
        mushroom.x = e.pageX - (mushroom.image.width/2);   
        $("#X_y").html("X:"+e.pageX+",mushroom:"+mushroom.image.width/2);
    });    
       
}  

//初始化   
$(document).ready(function(){  
    addEventHandlers();//加上事件
 //   loadImages();      
    ctx = document.getElementById('mycanvas').getContext('2d'); //获取2d画布      
    mushroom.image = mushroomImg;   
    screenWidth = parseInt($("#mycanvas").attr("width"));   
    screenHeight = parseInt($("#mycanvas").attr("height"));   
    mushroom.x = parseInt(screenWidth/2);   
    mushroom.y = screenHeight - 40;    
    setInterval(gameLoop, 10);   
});  
</script>
</head>

<body>

<div id="container" style="border:1px solid; cursor:none; width:480px; height:320px;">      
        <canvas id="mycanvas" width="480" height="320" >      
        </canvas>      
    </div> 
<span id="X_y"></span>
</body>
</html>