<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="jquery-1.4.2.js"></script> <title>让熊动起来</title> <script type="text/javascript"> var backgroundImg=new Image(); var mushroomImg=new Image(); //定义一个熊 var bearEyesClosedImg=new Image(); var speed=2;//开始的速度 var horizontalSpeed=speed;//水平速度 var verticalSpeed=-speed;//垂直速度 var bearAngle=2;//熊旋转速度 var ctx; var screenWidth; var screenHeight; //定义游戏物体对象 function GameObject(){ this.x=0; this.y=0; this.image=null; } function Mushroom(){}; Mushroom.prototype=new GameObject();//继承GameObject //定义一个熊Amimal继承GameObject function Animal(){}; Animal.prototype=new GameObject(); Animal.prototype.angle=0;//动物的角度,目前中(即作为动物它在屏幕上旋转退回) var animal=new Animal();//实例化一个熊 var mushroom=new Mushroom(); function gameLoop(){ //清屏 ctx.clearRect(0, 0, screenWidth, screenHeight); ctx.save(); //绘制背景 ctx.drawImage(backgroundImg,0,0); //绘制蘑菇 ctx.drawImage(mushroom.image,mushroom.x,mushroom.y); animal.x+=horizontalSpeed; animal.y+=verticalSpeed; animal.angle+=bearAngle; ctx.translate(animal.x+(animal.image.width/2),animal.y+(animal.image.height/2));//转换画布的用户坐标系统。 ctx.rotate(animal.angle*Math.PI/180);//旋转画布 ctx.drawImage(animal.image,-(animal.image.width/2),-(animal.image.height/2)); ctx.restore(); } function loadImages(){ mushroomImg.src="mushroom.png"; backgroundImg.src="forest1.jpg"; bearEyesClosedImg.src="bear_eyesclosed.png"; mushroom.image=mushroomImg; animal.image=bearEyesClosedImg; } function AddEventHandlers(){ $("#container").mousemove(function(e){ mushroom.x=e.pageX-(mushroom.image.width/2); }); } $(window).ready(function(){ AddEventHandlers(); loadImages(); ctx=document.getElementById("canvas").getContext('2d');; screenWidth=parseInt($("#canvas").attr("width")); screenHeight = parseInt($("#canvas").attr("height")); mushroom.image = mushroomImg; mushroom.x = parseInt(screenWidth/2);// 蘑菇X坐标 mushroom.y = screenHeight - 40;//蘑菇Y坐标 animal.x = parseInt(screenWidth/2);// 蘑菇X坐标 animal.y = screenHeight - 40;//蘑菇Y坐标 setInterval(gameLoop, 10); }); </script> </head> <body> <div id="container" style="border:1px solid; cursor:none; width:480px; height:320px;"> <canvas id="canvas" width="480" height="320" > </canvas> </div> </body> </html>
相关推荐
NULL 博文链接:https://hylxinlang.iteye.com/blog/1883132
NULL 博文链接:https://hylxinlang.iteye.com/blog/1883319
NULL 博文链接:https://hylxinlang.iteye.com/blog/1883285
HTML5 游戏 蘑菇与熊
基于线性学习机的蘑菇分类算法源代码,包含结果
HTML5小游戏源码下载,JS小游戏源码下载,坦克大战,驴子跳,连连看,俄罗斯方块,圈泡泡,塔防,太空战舰,愤怒的小鸟,植物大战僵尸,水果忍者,扫雷,超级玛丽,打地鼠,坦克大战,麻将等JS小游戏源码下载,游戏...
Android使用的MQTT客户端,支持订阅、发送消息;支持创建连接到本地保存;支持话题消息筛选; 使用视频:https://dwz.cn/undJFEnq 好像小米应用商店也有~
html游戏源码 蘑菇与熊 ,代码详细,游戏很好玩(特别是声音)。
蘑菇白昼+3D超炫动态壁纸[已取消机型限制]
这个游戏是在碰球游戏的基础上改进而来的,加入了连击判断、各种碰撞音乐、计分系统还有生命值,每掉在地上一次,生命少一次。 这是良心系列,绝对不会传与标题不一致的资源,下载后,如不能运行或与运行结果描述不...
js游戏引擎phaser示例:吃蘑菇游戏 使用phaser.js驱动,请在本地或服务器环境下打开使用访问game.html 操作说明: 上下左右键移动跳跃操控角色,空格键射击
游戏,移植自某同名Applet小游戏,移植代码几乎无变动,游戏的唯一内容就是用锤子活活砸死你的敌人(可怜的蘑菇们)。 源代码在jar文件中.
采蘑菇幼儿园教案___5篇.docx
该资源为一个flash动画,名称为采蘑菇的小姑娘
为了方便大家在工作之余能够获得更多快乐,偶特意制作了一款连连看小游戏——“蘑菇点点连连看”。本游戏的画面非常漂亮,游戏中的每个图标、游戏背景、图片按钮等素材无不是偶亲自操刀制作,一定能够带给大家美的...
蘑菇目前支持百度影音,QVOD , 迅雷下载, 旋风下载, Flashget下载等. 注: 蘑菇只支持mysql数据库 以下是大致的功能点. 1. 支持多风格模板 2. 支持多种缓存(例如: file , memcache , mongodb等) 3. 支持多种...
用c语言实现的2d游戏,结构有点乱,不过寻路递归写的还凑合,适合初学者看。
这是游戏编程课的课程设计,玩家通过鼠标键盘输入控制大蘑菇的运动,避开路上的子弹及其他障碍物并采集一定数量的蘑菇,成功回到家.
一个完整的HTML5网页游戏源码:蘑菇与熊游戏代码,界面做的相当专业,画质不错,游戏流畅度也是相当牛的,在支持HTML5的浏览器下都可以运行,游戏界面效果如截图所示,具体玩法我也没研究,只顾着研究HTML5的技术...