给小朋友做的一个很简单的游戏

按上下左右键，或触摸方式，控制植物战士消灭僵尸。

在电脑、手机、平板上都可以玩。

<!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 = 0var 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.wif(hero.y < 0) hero.y=0;if(hero.y > canvas.height - hero.h)  hero.y = canvas.height - hero.hif(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>

给小朋友做的一个很简单的游戏相关推荐

一个很简单的基于栈式过程虚拟机的实现，它运行目标平台【x86】的原生代码。
本文提供的 "栈式过程虚拟机" 的实现,挂在本人的 github 上面,对想要深入了解 "栈式过程虚拟机" 的人,它或许可以起到一个不错的作用,但是本人建议一般 ...
python写一个很简单的Atm机系统，使用pickle模块和json模块来保存数据
我做的是一个很简单的Atm系统,很多都没约束条件目的: 用面向对象思维来处理运用文件的读写文件的读写用pickle模块和json模块来处理 pickle模块: pickle模块处理数据功能很强大 ...
一个很简单的淘宝优惠券搜索助手大家看看有没有用吧
一个很简单的淘宝优惠券搜索助手大家看看有没有用吧下载地址:http://pan.baidu.com/s/1skRHTDF 转载于:https://www.cnblogs.com/devgis/p/ ...
一个很简单的淘宝优惠券搜索助手大家看看有没有用吧下载地址：http://pan.baidu.com/s/1skRHTDF
一个很简单的淘宝优惠券搜索助手大家看看有没有用吧下载地址:http://pan.baidu.com/s/1skRHTDF
html案例：模拟一个很简单的聊天框
html案例:模拟一个很简单的聊天框实现的代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "htt ...
做了一个仿吃鸡游戏，可多人联网，算是学习总结。
网上偶见UNITY,很有兴趣于是自学了一段时间,这是我做的一个仿吃鸡游戏DEMO,虽然只是抱着学习实践的很低要求,但从代码.模型.美工.场景都要自己做,繁杂超过了我的预估.对次时代游戏有兴趣可加我qq ...
用原生javascript做的一个打地鼠的小游戏
学习javascript也有一段时间了,一直以来分享的都是一些概念型的知识,今天有空做了一个打地鼠的小游戏,来跟大家分享一下,大家也可以下载来增加一些生活的乐趣,下面P出代码:首先是HTML部分代码: ...
用html5做了一个打气球小游戏
最近初试html5,用canvas和audio做了一个打气球小游戏. demo放在SAE,网址是:[url]http://auzll.sinaapp.com/balloon/[/url] 效果如下: ...
京东2016实习题目-选举游戏-小东和其他小朋友正在玩一个关于选举的游戏。选举是通过投票的方式进行的，得票最多的人将获胜。
编程1 -- 选举游戏题目 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) Prob ...

给小朋友做的一个很简单的游戏

给小朋友做的一个很简单的游戏相关推荐

最新文章

热门文章