structix/intecsync
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Update uebung4

Browse Source
This commit is contained in:
structix
2019-05-26 21:25:41 +02:00
parent 034e806551
commit c236524e62
3 changed files with 156 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
uebung4/drei-gewinnt.html
View File

@@ -84,10 +84,79 @@
<script>
var board = document.getElementById("board");
var info = document.getElementById("info");
var player = "x";
var win = false;
var draw = false;
board.addEventListener('click', function listener(event) {
var target = event.target;
function updateGame() {
if (target.nodeName==="TD") {
if(target.innerHTML == "") {
target.innerHTML = player;
checkWin();
checkDraw();
updateInfo();
}
}
}
function changePlayer() {
player = (player === "x") ? "o" : "x";
}
// Ergänzen Sie hier Ihren javaScript-Code
function updateInfo() {
if (win) {
info.innerHTML = player + " hat gewonnen";
} else if(draw) {
info.innerHTML = "Unentschieden";
} else {
changePlayer();
info.innerHTML = player + " ist am Zug";
}
}
function checkWin() {
for (i = 0; i < 3; i++) {
if (board.rows[i].cells[0].innerHTML !== "" && board.rows[i].cells[0].innerHTML === board.rows[i].cells[1].innerHTML && board.rows[i].cells[0].innerHTML === board.rows[i].cells[2].innerHTML) {
win = true;
}
if (board.rows[0].cells[i].innerHTML !== "" && board.rows[0].cells[i].innerHTML === board.rows[1].cells[i].innerHTML && board.rows[0].cells[i].innerHTML === board.rows[2].cells[i].innerHTML) {
win = true;
}
}
//diagonal
if (board.rows[0].cells[0].innerHTML !== "" && board.rows[0].cells[0].innerHTML === board.rows[1].cells[1].innerHTML && board.rows[0].cells[0].innerHTML === board.rows[2].cells[2].innerHTML) {
win = true;
}
if (board.rows[0].cells[2].innerHTML !== "" && board.rows[0].cells[2].innerHTML === board.rows[1].cells[1].innerHTML && board.rows[0].cells[2].innerHTML === board.rows[2].cells[0].innerHTML) {
win = true;
}
}
function checkDraw() {
temp = 0;
for (i = 0; i < 3; i++) {
for (k = 0; k < 3; k++) {
if (board.rows[i].cells[k].innerHTML !== "") {
temp++;
}
}
}
if (temp == 9) {
draw = true;
}
}
if(draw === false && win === false) {
updateGame();
}
});
</script>
</body>
</html>

107
uebung4/fliegender-drache.html
View File

@@ -1,71 +1,46 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="fliegender-drache.css" rel="stylesheet">
<title>Fliegender Drache</title>
</head>
<body>
<canvas id="canvas" width="700" height="350" style="border: 1px solid;"></canvas>
<img src="dragon.png" style="display: none" id="dragon">
<img src="background.png" style="display: none" id="hintergrund"><br>
<p><label for="speed1">Steig-Sinkgeschwindigkeit:</label> <input type="range" min="1" max="10" value="5" id="speed1"></p>
<p><label for="speed2">Drachengeschwindigkeit :</label> <input type="range" min="1" max="10" value="5" id="speed2"></p>
<head>
<meta charset="utf-8" />
<link href="fliegender-drache.css" rel="stylesheet">
<title>Fliegender Drache</title>
</head>
<body>
<canvas id="canvas" width="700" height="350" style="border: 1px solid;"></canvas>
<img src="dragon.png" style="display: none" id="dragon">
<img src="background.png" style="display: none" id="background"><br>
<!-- <p id="werte_hg"></p>
<p id="werte_drg"></p>-->
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var dragon = document.getElementById("dragon");
var hintergrund = document.getElementById("hintergrund");
var hg_speed = 10;
var hg1 = canvas.width;
var hg2;
var drg = 100;
var drg_speed = 10;
var drg_steigend = false;
<script>
let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d");
let dragon = document.getElementById("dragon");
let background = document.getElementById("background");
let dragon_speed = background_speed = 10;
let drg = 100;
let drg_up = true;
let bg1 = canvas.width;
//Initial start of animation
requestAnimationFrame(animation);
function animation()
{
x = parseInt(document.getElementById("speed1").value);
y = parseInt(document.getElementById("speed2").value);
if (hg1 > 0)
{
hg1 = parseInt(hg1)-(hg_speed*(y/10));
function animation() {
bg1 = (bg1 > 0) ? parseInt(bg1) - background_speed / 2 : canvas.width;
let bg2 = parseInt(bg1) - canvas.width;
if (!drg_up && drg <200) {
drg = drg + dragon_speed / 6;
} else if (!drg_up && drg >= 200) {
drg_up = true;
} else if (drg_up && drg > 0) {
drg = drg - dragon_speed / 2;
} else {
drg_up = false;
}
context.drawImage(background,bg1,0,700,350);
context.drawImage(background,bg2,0,700,350);
context.drawImage(dragon, 200, drg, 169, 200);
requestAnimationFrame(animation);
}
else
{
hg1 = canvas.width;
}
hg2 = parseInt(hg1) - canvas.width;
if (drg_steigend == false && drg <200)
{
drg = drg + (drg_speed*(x/10));
}
else if (drg_steigend== false && drg >= 200)
{
drg_steigend = true;
}
else if (drg_steigend == true && drg > 0)
{
drg = drg - (drg_speed*(x/10));
}
else
{
drg_steigend = false;
}
context.drawImage(hintergrund,hg1,0,700,350);
context.drawImage(hintergrund,hg2,0,700,350);
context.drawImage(dragon, 200, drg, 169, 200);
/* document.getElementById("werte_hg").innerHTML = "hg1: " + hg1 + " hg2: " + hg2 + " hg_speed: " + hg_speed;
document.getElementById("werte_drg").innerHTML = "drg: " + drg + " drg steigt: " + drg_steigend + " drg_speed: " + drg_speed + " regler: " + x; */
requestAnimationFrame(animation);
}
requestAnimationFrame(animation);
</script>
</body>
</html>
</script>
</body>
</html>

81
uebung4/smiley.html
View File

@@ -1,46 +1,51 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href=".css" rel="stylesheet">
<title>Smiley</title>
</head>
<body onload="werte()" style="text-align: center;">
<h1>Smiley</h1>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href=".css" rel="stylesheet">
<title>Smiley</title>
</head>
<body onload="changeValue()" style="text-align: center;">
<h1>Smiley</h1>
<canvas width="400" height="400" id="smileycanvas" style="border: 1px solid; vertical-align: middle;">Dieser Text wird angezeigt, falls der Browser kein Canvas unterstützt.</canvas><br>
<input type="range" max="75" min="-75" value="0" id="slider" style="width: 400px; height: 50px;" oninput="changesmiley()">
<p id="ausgabe"></p>
<script>
let sliderval = 0;
function changesmiley() {
sliderval = parseInt(document.getElementById("slider").value);
let canvas = document.getElementById("smileycanvas");
<canvas width="400" height="400" id="canvas" style="border: 1px solid; vertical-align: middle";>
Fallback falls der Browser keinen Canvas unterstützt.
</canvas>
<br>
<input type="range" max="75" min="-75" value="0" id="slider" style="width: 400px; height: 50px;" oninput="changeValue()" >
<script>
let h = 0;
let canvas = document.getElementById("canvas");
let slider = document.getElementById("slider");
let smiley = canvas.getContext('2d');
smiley.arc(200, 200, 190, 0, 2 * Math.PI);
smiley.fillStyle="yellow";
smiley.fill();
smiley.stroke();
function changeValue(){
h = parseInt(slider.value);
//draw head
smiley.beginPath();
smiley.arc(200, 200, 190, 0, 2 * Math.PI);
smiley.fillStyle="yellow";
smiley.fill();
smiley.stroke();
//draw left eye
smiley.beginPath();
smiley.arc(100, 130, 25 + (0.1 * h), 0, 2 * Math.PI);
smiley.fillStyle="black";
smiley.fill();
smiley.beginPath();
smiley.arc(100, 130, 25 + (0.1*sliderval), 0, 2*Math.PI);
smiley.fillStyle="black";
smiley.fill();
//draw right eye
smiley.beginPath();
smiley.arc(270, 130, 25 + (0.1 * h), 0, 2 * Math.PI);
smiley.fillStyle = "black";
smiley.fill();
smiley.beginPath();
smiley.arc(270, 130, 25 + (0.1*sliderval), 0, 2*Math.PI);
smiley.fillStyle = "black";
smiley.fill();
smiley.beginPath();
smiley.bezierCurveTo(75, 270, 200, 270 + sliderval, 325, 270);
smiley.stroke();
}
</script>
</body>
//draw mouth
smiley.beginPath();
//I used 2*k to get a bright smile :)
smiley.bezierCurveTo(75, 270, 200, 270 + 2 * h, 325, 270);
smiley.stroke();
}
</script>
</body>