Canvas js 小游戏
第一次用canvas做了个很小很小的游戏。不是很完美，算是Hello Wrold吧。
下面的横条可以用左右箭头键控制，也可以用鼠标。按键控制不是很灵活。
下面是html：
<!DOCTYPE HTML>
<html>
<head>
<meta chaset="utf-8" />
<title>Canvas 小游戏</title>
<style>
a{color:#333;margin:0 10px;font-size:24px;}
.ts{width:800px;text-align:center; height:100px;position:absolute;left:50%;top:50%;margin-top:-55px;margin-left:-405px;border:1px dotted #778855;background:#F5F5F5;padding:10px;}</style>
</head>
<body> <input type="button" value="Play" id="play" /><br />
</body>
</html>
下面是JS部分：
(function(){
/*
Author:Jin.dh
Date:2012/3/3
*/
function isIE(){
var userAgent = navigator.userAgent;
var isOpera = userAgent.indexOf("Opera") > -1;
var IE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera ;
return IE;
};
var box = {
w:500,
h:500,
b:"#ccc"
};
var blueBall ={
x:box.w/2,
y:box.h-30-5,
r:30,
speedX:15,
speedY:10,
show:true
};
var ballMax = {
x:box.w-blueBall.r,
y:box.h-blueBall.r
};
var redLine ={
x:box.w/2-150/2,
w:150,
h:5,
y:box.h-5,
show:true
}
function $C(tag,father){
var o = document.createElement(tag||"div");
father = father || document.body;
father.appendChild(o);
return o;
};
var btn ;
function init(){
if(isIE()){
var tsHTML = "<div class='ts'><h1 style='color:#f00'>您的浏览器暂不支持本Demo，请换成下面的浏览器试试：</h1>";
tsHTML+=" <a href='http://www.google.cn/chrome/intl/zh-CN/landing_chrome.html' target='_blank'>chrome</a><a href='http://www.firefox.com.cn/download/' target='blank'>firefox</a><a href='http://www.opera.com/' target='_blank'>opera</a><a href='http://www.apple.com.cn/safari/' target='_blank'>safari</a></div>";
document.body.innerHTML = tsHTML;
return false;
};
canvas = $C("canvas");
canvas.width = box.w;
canvas.height = box.h;
canvas.style.backgroundColor = box.b;
ctx = canvas.getContext("2d");
blueBall.show = true;
redLine.show = true;
drew();
btn = document.getElementById("play");
btn.onclick = function(){
play();
this.disabled = true;
};
};
function keyPass(){
document.body.onkeydown = function(e){
if(typeof e.charCode == "Number"){
var code = e.charCode;
}else{
var code = e.keyCode;
}
switch(code){
case 37: //左箭头
redLine.x = (redLine.x<=0)? 0:redLine.x-10;
drew();
break;
case 39: //右箭头
redLine.x = (redLine.x>=(box.w-redLine.w))? box.w-redLine.w:redLine.x+10;
drew();
break;
};
}
}
function reset(){
blueBall.x = box.w/2;
blueBall.y = box.h-30-5;
redLine.x = box.w/2-150/2;
redLine.y = box.h-5;
btn.disabled = false;
blueBall.show = true;
redLine.show = true;
canvas.onmousemove = null;
drew();
};
function play(){
blueBallMove();
keyPass();
canvas.onmousemove = function(e){
var x = e.clientX;
redLine.x = x > (box.w-redLine.w) ? box.w-redLine.w:x;
drew();
};
};
function addLoad(fn){
var old = window.onload;
if(typeof old == "function"){
window.onload = function(){
fn();
old();
}
}else{
window.onload = fn;
}
}
//画圆
function drewBlueBall(){
if(blueBall.show){
ctx.fillStyle='blue';
ctx.beginPath();
ctx.arc(blueBall.x,blueBall.y,blueBall.r,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
};
};
//画线条
function drewLine(){
if(redLine.show){
ctx.fillStyle = "red";
ctx.beginPath();
ctx.rect(redLine.x,redLine.y,redLine.w,redLine.h);
ctx.fill();
};
};
function blueBallMove(){
var autoId = setInterval(function(){
if(blueBall.x<=blueBall.r){
blueBall.speedX = Math.floor(Math.random()*15+5);
};
if(blueBall.x>=ballMax.x){
blueBall.speedX = -Math.floor(Math.random()*15+5);
};
if(blueBall.y<=blueBall.r){
blueBall.speedY = blueBall.speedY*-1;
};
if( blueBall.y>=ballMax.y){
if(blueBall.x>=redLine.x&&blueBall.x<=redLine.x+redLine.w){
blueBall.speedY = blueBall.speedY*-1;
}else{
alert("Game Over");
clearInterval(autoId);
blueBall.show = false;
redLine.show = false;
reset();
document.body.onkeydown = null;
return false;
};
};
blueBall.x+=blueBall.speedX;
blueBall.y+=blueBall.speedY;
drew();
},30);
};
function drew(){
ctx.clearRect(0,0,box.w,box.h);
if(blueBall.show){
drewBlueBall();
};
if(redLine.show){
drewLine();
};
};
addLoad(init);//初始化
})();
