- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
这个想法是这个游戏每 15 毫秒在一个随机位置生成一个圆圈。它似乎不识别变量 initialize 并且不创建新的圆圈,甚至根本不生成一个圆圈
<!DOCTYPE html>
<html>
<head>
<script src="wack-a-circle.js"></script>
</head>
<body onload="initialize();">
<canvas id="canvas" width="848" height="600" style="border:1px solid black;"></canvas>
</body>
</html>
现在是javascript
var canvas;
var circles = [];
var circleRadius = 50;
var score = 0;
var xaxis = getRandom(848)
var yaxis = getRandom(600)
function wackableCircle(){
xaxis = getRandom(848)
yaxis = getRandom(600)
if(circles.length > 10){
alert("You lose!\nScore: " + score)
}
setTimeout(function() {circles.push(new wackableCircle()}, 1000 - (score / 5));
}
function getRandom(max){
return Math.floor((Math.random() * max));
}
function initialize(){
canvas = document.getElementById("canvas");
canvas.addEventListener("mousedown", onMouseDown)
//add new circle every 1000ms
setTimeout(function () {circles.push(new wackableCircle())}, 1000);
setInterval(function () {updateCanvas()}, 15); //Update canvas every 15ms.
}
//Find difference between two numbers.
function numberDifference (a, b){
return Math.abs(a - b);
}
function onMouseDown(event){
for(var i = 0; i < circles.length; i++){
var wackableCircle = circles[i];
if(numberDifference(event.clientX, xaxis) < circleRadius){
//The circle's X and the mouse's X are within 50.
if(numberDifference(event.clientY, yaxis) < circleRadius){
//The circle's Y and the mouse's Y are also with in 50.
circles.splice(i, 1);
}
}
}
alert("click at " + event.clientX + ", " + event.clientY);
}
function updateCanvas(){
//clear canvas
var canvasContext = canvas.getContext("2d");
canvasContext.clearRect(0, 0, 848, 600);
for (var i = 0; i < circles.length; i++){
wackableCircle = circles[i];
//Draw circle at wackableCircle's x and y.
canvasContext.beginPath();
canvasContext.arc(xaxis, yaxis, circleRadius, 0 ,Math.PI * 2);
canvasContext.fill();
}
}
最佳答案
我可以让您更轻松地更进一步,我认为这回答了您关于获取显示内容的问题。但这并不能使整个事情正常进行。
更新
setTimeout(function() {circles.push(new wackableCircle()}, 1000 - (score / 5));
与
setTimeout(function() { circles.push(new wackableCircle()) }, 1000 - (score / 5));
您在 new wackableCircle() 之后缺少右括号。
又近了一步..
var canvas;
var circles = [];
var circleRadius = 50;
var score = 0;
var xaxis = getRandom(848)
var yaxis = getRandom(600)
function wackableCircle(){
return { x: getRandom(848), y : getRandom(600)};
}
function getRandom(max){
return Math.floor((Math.random() * max));
}
function initialize(){
canvas = document.getElementById("canvas");
canvas.addEventListener("mousedown", onMouseDown)
//add new circle every 1000ms
setInterval(function () {circles.push(new wackableCircle())}, 1000 - (score / 5));
setInterval(function () {updateCanvas()}, 15); //Update canvas every 15ms.
}
//Find difference between two numbers.
function numberDifference (a, b){
return Math.abs(a - b);
}
function onMouseDown(event){
for(var i = 0; i < circles.length; i++){
var w = circles[i];
if(numberDifference(event.clientX, w.x) < circleRadius){
//The circle's X and the mouse's X are within 50.
if(numberDifference(event.clientY, w.y) < circleRadius){
//The circle's Y and the mouse's Y are also with in 50.
circles.splice(i, 1);
}
}
}
alert("click at " + event.clientX + ", " + event.clientY);
}
function updateCanvas(){
//clear canvas
var canvasContext = canvas.getContext("2d");
canvasContext.clearRect(0, 0, 848, 600);
for (var i = 0; i < circles.length; i++){
w = circles[i];
//Draw circle at wackableCircle's x and y.
canvasContext.beginPath();
canvasContext.arc(w.x, w.y, circleRadius, 0 ,Math.PI * 2);
canvasContext.fill();
}
}
您的代码中存在一个重大缺陷,wackableCircle() 实际上并未返回任何内容。我现在已经得到它返回一个简单的对象,其中包含我们可以查询的随机 x 和 y 坐标。您的版本正在使用代码中其他地方定义的变量,而不是您打算创建的对象的随机变量。加速圆圈出现的逻辑可能不在这里,但你会明白的:)
关于javascript - Wack-A-Circle 游戏不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33627474/
我有一个正在处理的 UWP 应用程序,并且还为其设置了 CI。我想将 Windows App Certification Kit (WACK) 作为构建步骤包括在内,以根据 MS 规则验证所有构建应用
这个想法是这个游戏每 15 毫秒在一个随机位置生成一个圆圈。它似乎不识别变量 initialize 并且不创建新的圆圈,甚至根本不生成一个圆圈
我们有 WPF 桌面应用程序,我们将其打包在安装程序可执行文件中。由于 SmartScreen,我们需要对我们的应用程序进行认证。我们使用 Windows 10 SDK 中的 Windows 应用认证
我真的很努力地解决这个问题,但一直遇到问题。这是一个老鼠弹出的游戏,你击中它们并获得积分。希望你能在这里看到它...... http://thetally.efinancialnews.com/tal
该应用程序运行良好。但是当我运行 WACK 工具时,它失败并给出以下错误。 FAILED Bytecode generation Error Found: The bytecode generatio
我有一个 UWP 项目作为我的 Xamarin.Forms 解决方案的一部分。在本地运行 Windows 应用程序证书工具包时,它可以通过,没有任何问题。 将我的应用程序提交到商店时,认证过程失败并出
我一直在尝试在 Unity 2018.2.1f1 和 Visual Studio 2017 15.8.0 中成功构建我的游戏。 在尝试为具有所有/每个不同配置的Windows商店成功构建/打包/WAC
我有一个针对 Windows-10 桌面平台的 C# 应用程序。C# 应用程序调用用 C++ 编写的 native 组件。我的 native C++ 代码具有 Visual C++ 组件扩展 (C++
我正在开发一个 UWP 应用程序,它使用了旧版 Windows 10 中不可用的一些功能。因此,我需要检查是否安装了创意者更新。 应用程序中有使用 AnalyticsInfo.VersionInfo
我的 UWP 应用程序 (C++ XAML/DirectX) 使用 Windows 运行时组件 (C#) (*) Windows App Cert Kits“支持的 API 测试”失败并出现错误 (*
我正在尝试让我们的解决方案在 .Net Native 工具链下构建,并通过 WACK (Windows App Cert Kit) 测试,这些测试最终将被要求将我们的应用程序上传到商店。 我们目前已通
我是一名优秀的程序员,十分优秀!