按上下左右键,或触摸方式,控制植物战士消灭僵尸。
在电脑、手机、平板上都可以玩。
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
<body>
<div id="info">ttt</div>
<script>
var info = document.getElementById("info");
info.innerHTML = window.screen.width+","+window.screen.height;
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = window.screen.width-20;
canvas.height = window.screen.height-200;
document.body.appendChild(canvas);
var hero = {
ready : false,
speed: 100, // 每秒移动的像素
x: 0,y: 0,w:80,h:80,
oldx: 0,oldy: 0
};
var monster = {
ready : false,
isDrawed: false,
x: 0,y: 0,w:45,h:45
};
var heroImage = new Image();
heroImage.src = "wandou.jpg";
heroImage.onload = function () {
hero.ready = true;
};
var monsterImage = new Image();
monsterImage.src = "jiangshi.jpg";
monsterImage.onload = function () {
monster.ready = true;
};
// 处理按键
var keysDown = {};
addEventListener("keydown", function (e) {
keysDown[e.keyCode] = true;
}, false);
addEventListener("keyup", function (e) {
delete keysDown[e.keyCode];
}, false);
document.addEventListener('touchstart',touch, false);
document.addEventListener('touchmove',touch, false);
document.addEventListener('touchend',touch, false);
var touchX=0,touchY=0;
function touch (event){
var event = event || window.event;
switch(event.type){
case "touchstart":
touchX=event.touches[0].clientX;
touchY=event.touches[0].clientY;
info.innerHTML = "Touch started (" + Math.round(touchX) + "," + Math.round(touchY) + ")";
break;
case "touchend":
delete keysDown[37];delete keysDown[38];delete keysDown[39];delete keysDown[40];
info.innerHTML = "Touch end (" + Math.round(event.changedTouches[0].clientX) + "," + Math.round(event.changedTouches[0].clientY) + ")";
break;
case "touchmove":
event.preventDefault();
delete keysDown[37];delete keysDown[38];delete keysDown[39];delete keysDown[40];
if(event.touches[0].clientX > touchX){
keysDown[39] = true;// 用户按的是→
}
if(event.touches[0].clientX < touchX){
keysDown[37] = true;// 用户按的是→
}
if(event.touches[0].clientY > touchY){
keysDown[40] = true;// 用户按的是↓
}
if(event.touches[0].clientY < touchY){
keysDown[38] = true;// 用户按的是↑
}
touchX=event.touches[0].clientX;
touchY=event.touches[0].clientY;
info.innerHTML = "Touch moved (" + Math.round(touchX) + "," + Math.round(touchY) + ")";
break;
}
}
// 更新游戏对象的属性
var count = 0
var update = function (modifier) {
if (38 in keysDown) { // 用户按的是↑
hero.y -= hero.speed * modifier;
}
if (40 in keysDown) { // 用户按的是↓
hero.y += hero.speed * modifier;
}
if (37 in keysDown) { // 用户按的是←
hero.x -= hero.speed * modifier;
}
if (39 in keysDown) { // 用户按的是→
hero.x += hero.speed * modifier;
}
if(hero.x < 0) hero.x=0;
if(hero.x > canvas.width - hero.w) hero.x = canvas.width - hero.w
if(hero.y < 0) hero.y=0;
if(hero.y > canvas.height - hero.h) hero.y = canvas.height - hero.h
if(count++%100==0){
monster.x = 32 + (Math.random() * (canvas.width - 64));
monster.y = 32 + (Math.random() * (canvas.height - 64));
monster.isDrawed=false;
console.log(count,hero)
if(count>40*100){
monster.ready = false
}
}
};
// 画出所有物体
var render = function () {
if (hero.ready) {
ctx.clearRect(hero.oldx, hero.oldy, hero.w,hero.h);
ctx.drawImage(heroImage, hero.x, hero.y, hero.w,hero.h);
hero.oldx = hero.x; hero.oldy = hero.y;
}
if (monster.ready && !monster.isDrawed) {
ctx.drawImage(monsterImage, monster.x, monster.y,monster.w,monster.h);
monster.isDrawed = true;
}
};
// 游戏主函数
var main = function () {
var now = Date.now();
var delta = now - then;
update(delta / 1000);
render();
then = now;
// 立即调用主函数
requestAnimationFrame(main);
};
// 少年,开始游戏吧!
var then = Date.now();
main();
</script>
</body>
</html>