<!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>
分享到：
相关推荐
【标题】：“蘑菇游戏_让蘑菇动起来” 这篇博客文章主要探讨了如何通过编程技术让蘑菇这一游戏元素在屏幕上生动地动起来。这通常涉及到游戏开发中的动画制作和物理模拟技术，尤其是对于初学者和对游戏开发感兴趣的...
标题“蘑菇游戏_熊碰撞蘑菇处理”涉及到的是一个游戏开发中的特定环节，即游戏对象（熊）与环境元素（蘑菇）之间的碰撞检测和处理。在游戏编程中，碰撞检测是关键的一部分，它决定了游戏交互的精确性和玩家体验的...
标题“蘑菇游戏_熊碰撞边界处理”涉及到的是游戏开发中的一个重要环节——碰撞检测与边界处理。在游戏开发中，特别是2D游戏，碰撞检测确保了游戏物体（如角色、道具等）之间的交互真实且准确。当游戏中的“熊”与...
这款游戏中，"蘑菇与熊"的主题可能涉及到森林生态、冒险或者角色扮演等元素，旨在通过趣味性的互动，吸引玩家进行探索和挑战。 HTML5是现代网页开发的标准，它的出现极大地提升了网页的交互性和多媒体内容的承载...
基于线性学习机的蘑菇分类算法源代码，包含结果
这个“js游戏引擎phaser示例：吃蘑菇游戏”是一个基于Phaser.js开发的互动小游戏，它展示了如何利用该引擎创建一个简单的游戏场景，包括角色控制、碰撞检测以及用户交互。 首先，我们从“game.html”文件入手，这是...
【Java版砸蘑菇游戏】是一款基于Java编程语言开发的小型休闲游戏，它的灵感来源于一个知名的Applet小游戏。Applet是Java的一种小程序，可以在浏览器中运行，而Java版砸蘑菇游戏则是将这种体验移植到了独立的Java应用...
在这款游戏中，“蘑菇与熊”的概念可能涉及到玩家需要控制角色（可能是蘑菇或熊）来完成一系列任务或挑战。游戏的声音效果被特别提及，这意味着源码中很可能包含音频管理部分，例如使用HTML5的`<audio>`元素或者引入...
Android使用的MQTT客户端，支持订阅、发送消息；支持创建连接到本地保存；支持话题消息筛选； 使用视频：https://dwz.cn/undJFEnq 好像小米应用商店也有~
HTML5小游戏源码下载，JS小游戏源码下载，坦克大战，驴子跳，连连看，俄罗斯方块，圈泡泡，塔防，太空战舰，愤怒的小鸟，植物大战僵尸，水果忍者，扫雷，超级玛丽，打地鼠，坦克大战，麻将等JS小游戏源码下载，游戏...
《蘑菇白昼+3D超炫动态壁纸：打造个性手机屏幕新体验》 ...只需通过压缩包中的"蘑菇白昼 3D超炫动态壁纸.apk"进行安装，即可开启你的个性化手机屏幕之旅，让你的手机屏幕焕发出前所未有的生命力。
【标题】"2D采蘑菇游戏C++源代码"是一个非常适合C++初学者研究和学习的项目，它展示了如何利用C++编程语言构建一个简单的2D游戏。在这款游戏中，玩家可能需要控制一个角色在虚拟环境中采摘蘑菇。游戏的核心功能包括...
"蘑菇与熊"游戏源码可能包含了以下几个关键知识点： 1. Canvas基本操作：学习如何创建Canvas元素，获取其上下文，并通过context对象的drawImage、fillRect、beginPath、arc等方法进行图形绘制。 2. JavaScript基础...
《C语言代码采蘑菇小游戏详解》 在编程学习的道路上，实践是检验真理的唯一标准。C语言作为经典的编程语言，其简洁而强大的特性深受程序员喜爱。本篇将围绕“C语言代码采蘑菇小游戏”这一主题，深入探讨游戏的实现...
这个游戏是在碰球游戏的基础上改进而来的，加入了连击判断、各种碰撞音乐、计分系统还有生命值，每掉在地上一次，生命少一次。 这是良心系列，绝对不会传与标题不一致的资源，下载后，如不能运行或与运行结果描述不...
采蘑菇幼儿园教案___5篇.docx
该资源为一个flash动画，名称为采蘑菇的小姑娘
【标题】"采蘑菇游戏源代码--C++" 涉及的知识点： 1. **C++编程语言**：此游戏源代码是用C++编写的，C++是一种通用的、面向对象的编程语言，以其高效性和灵活性在游戏开发中广泛应用。它支持面向过程和面向对象两种...
首先，我们来看标题中的"蘑菇熊"，这很可能是游戏的主题或主角，展示了如何设计和创建一个游戏的角色和场景。在HTML5游戏中，角色和场景通常通过CSS3来定义样式，用JavaScript来实现动态行为。源码中的每个"index...